<template>
    <div class="tree">
      <div :style="'right:'+position.right" class="tree-hide-style" v-show="!treeIsShow" @click="treeIsShow=!treeIsShow"></div>
      <transition name="tree">
        <div :style="'right:'+position.right" class="tree-show-detail" v-show="treeIsShow">
          <div class="tree-header">
            <img src="../assets/img/layer-icon.png" alt="">
            <h3>图层管理</h3>
          </div>
          <div class="tree-content">
            <a-tree :tree-data="treeData" :selectable="false" default-expand-all :default-selected-keys="[]">
              <a-icon :style="{ fontSize: 18*desgin1pxToCilent+'px' }" slot="switcherIcon" type="caret-down" />
              <template slot="custom" slot-scope="{ title ,isParent,key}">
                <div class="custom-title">
                  <div class="custom-label" @click="handleClick(title,key)">
                    <template v-if="!isParent">
                      <a-checkbox :checked="checkedList.includes(key)"></a-checkbox>
                    </template>
                    <span>{{title}}</span>
                  </div>
                </div>
              </template>
            </a-tree>
          </div>
          <div class="tree-footer">
            <button @click="reset">重置</button>
            <button @click="treeIsShow=!treeIsShow">返回</button>
          </div>
        </div>
      </transition>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import mapService from '@src/utils/mapService'

export default {
	name: 'Tree',
	computed: {
    ...mapGetters(['']),
  },
  props:['position'],
  components:{

  },
	data() {
		return {
      treeIsShow:false,
			treeData:[
        {
          title: '影像层',
          key: '0',
          isParent:true,
          scopedSlots:{children:'custom'},
          children: [
            { 
              title: '盐田精细', 
              key: '0-0' ,
              isParent:false,
              scopedSlots: { title: 'custom',key:'custom',isParent:'custom'} 
            },
            { 
              title: '深圳影像',
              key: '0-1' ,
              isParent:false,
              scopedSlots: { title: 'custom',key:'custom',isParent:'custom'} 
            },
          ],
        },
        {
          title: '地形层',
          key: '1',
          isParent:true,
          children: [
            { title: '盐田地形', key: '1-0' ,isParent:false,scopedSlots: { title: 'custom',key:'custom',isParent:'custom'} },
            { title: '深圳地形', key: '1-1' ,isParent:false,scopedSlots: { title: 'custom',key:'custom',isParent:'custom'} },
          ],
        },
        {
          title: '模型层',
          key: '2',
          isParent:true,
          children: [
            { title: '盐田倾斜', key: '2-0' ,isParent:false,scopedSlots: { title: 'custom',key:'custom',isParent:'custom'} },
          ],
        },
        {
          title: '路网层',
          key: '3',
          isParent:true,
          children: [
            { title: '盐田道路', key: '3-0' ,isParent:false,scopedSlots: { title: 'custom',key:'custom',isParent:'custom'} },
            { title: '深圳道路', key: '3-2' ,isParent:false,scopedSlots: { title: 'custom',key:'custom',isParent:'custom'} },
            { title: '盐田区划', key: '3-1' ,isParent:false,scopedSlots: { title: 'custom',key:'custom',isParent:'custom'} },
            // { title: '行政名称', key: '3-1' ,isParent:false,scopedSlots: { title: 'custom',key:'custom',isParent:'custom'} },
          ],
        },
        {
          title: '背景层',
          key: '4',
          isParent:true,
          children: [
            { title: '水系', key: '4-0' ,isParent:false,scopedSlots: { title: 'custom',key:'custom',isParent:'custom'} },
          ],
        },
        {
          title: '特效层',
          key: '5',
          isParent:true,
          children: [
            { title: '夜间', key: '5-0' ,isParent:false,scopedSlots: { title: 'custom',key:'custom',isParent:'custom'} },
          ],
        },
      ],
      checkedList:['0-0','0-1','1-0','1-1','2-0','3-1','3-2','4-0'],

		}
	},
	mounted() {
			
	},
	methods: {
    handleClick(title,key){
      if(this.checkedList.includes(key)){
        let index = this.checkedList.indexOf(key);
        this.checkedList.splice(index,1);
        this.toggleLayer(title,key,0);
        
      }else{
        this.checkedList.push(key);
        this.toggleLayer(title,key,1);
      }
    },
    toggleLayer(title,key,bol){
      /**
       * 1显示,0隐藏
       */
      let msg;
      switch (key) {
        case "0-0": //"盐田精细"||
          msg = {
            "dom" : [ "yt_dom" ],
            "service_id" : "base_scene.show_dom",
            "show" : bol
          };
          console.log(JSON.stringify(msg))
          mapService.sendService(msg);
          break;
        case "0-1": //"深圳影像"||
          msg = {
            "dom" : [ "shenzhen" ],
            "service_id" : "base_scene.show_dom",
            "show" : bol
          };
          console.log(JSON.stringify(msg))
          mapService.sendService(msg);	
          break;
        case "1-0": //"盐田地形"||
          msg = {
            "service_id" : "base_scene.show_dem",
            "dem_name" : "yt_demall",
            "show" : bol
          };
          console.log(JSON.stringify(msg))
          mapService.sendService(msg);
          break;
        case "1-1": //"深圳地形"||
          msg = {
            "service_id" : "base_scene.show_dem",
            "dem_name" : "dem",
            "show" : bol
          };
          console.log(JSON.stringify(msg))
          mapService.sendService(msg);
          break;
        case "2-0": //"盐田倾斜"||
          msg = {
            "id" : "yttiles",
            "service_id" : "tile3d.show",
            "show" : bol
          };
          console.log(JSON.stringify(msg))
          mapService.sendService(msg);
          break;
        case "3-0": //"盐田道路"||
          msg = {
            "layer_id" : [20191048,20191049,20191050,20191051,20191052,20191053],
            "service_id" : "viewobj_layer.show",
            "show" : bol,
            "view_type" : 5000
          };
          console.log(JSON.stringify(msg))
          mapService.sendService(msg);
          break;
        case "3-1": //"盐田区划"||
          msg = {
            "layer_id" : 20191056,
            "service_id" : "viewobj_layer.show",
            "show" : bol,
            "view_type" : 40960
          };
          console.log(JSON.stringify(msg))
          mapService.sendService(msg);
          break;
        case "3-2": //"深圳道路"||
          msg = {
            "layer_id" : 20191034,
            "service_id" : "viewobj_layer.show",
            "show" : bol,
            "view_type" : 5000
          };
          console.log(JSON.stringify(msg))
          mapService.sendService(msg);
          break;
        case "4-0": //"水系"||
          msg = {
            "layer_id" : 20191046,
            "service_id" : "viewobj_layer.show",
            "show" : bol,
            "view_type" : 59262
          };
          console.log(JSON.stringify(msg))
          mapService.sendService(msg);
          break;
        case "5-0": //"夜间"||
          if(bol==0){
            // 关闭夜景脚本
            mapService.sendService({
              "service_id": "smart_city_effect.script.stop_script",
              "script_id":  "68"
            });
          }else{
            msg = {
            "releative_path":"plant\\SFScript\\初始化脚本.as3",
              "service_id": "smart_city_effect.script.play_script",
              "stop_mode": 1,
              "script_id":  "68"
            };
            console.log(JSON.stringify(msg))
            mapService.sendService(msg);
          }
          break;
        default:
          this.$message.info('暂无对应的服务!')
      }
    },
    reset(){
      let that = this;
      this.checkedList=['0-0','0-1','1-0','1-1','2-0','3-1','3-2','4-0'];
      this.checkedList.forEach(function(item){
        that.toggleLayer('',item,1);
      })
    },
    back(){

    }
	}
}
</script>

<style lang="less">
.tree {
  & .tree-hide-style{
    position: absolute;
    right: 470px;
    top: 100px;
    width: 50px;
    height: 50px;
    // line-height: 80px;
    // text-align: center;
    background: url('../assets/img/layer-icon.png') center center no-repeat rgba(10,18,43,0.85);
    background-size: 17px 16px;
    cursor: pointer;
    transition: all .1s;
  }
  & .tree-show-detail{
    position: absolute;
    right: 470px;
    top: 100px;
    z-index: 99;
    user-select: none;
    width: 215px;
    max-height: 700px;
    height: auto;
    background: rgba(10,18,43,0.85);
    padding: 11px 0;
    box-sizing: border-box;
    transition: all .1s;
    & .tree-header{
      width: 100%;
      height: 38px;
      display: flex;
      align-items: center;
      padding-left: 15px;
      margin-bottom: 10px;
      &>img{
        width: 17px;
        height: 16px;
        margin-right: 11px;
      }
      &>h3{
        font-size: 16px;
        color: #FFFFFF;
      }
    }
    & .tree-content{
      padding: 0 14px;
      box-sizing: border-box;
      max-height: 582px;
      height: auto;
      overflow-y: auto;
      overflow-x: hidden;
      & .custom-title{
        width: 100%;
        & .custom-label{
          &>span{
            margin-left: 8px;
            font-size: 14px;
          }
        }
      }
      // ant-desgin样式修改
      & .ant-tree{
        color: #f2f2f2;
      }
      & .ant-tree li .ant-tree-node-content-wrapper{
        color: #f2f2f2;
        font-size: 16px;
        opacity: 0.85;
      }
      & .ant-tree li .ant-tree-node-content-wrapper:hover{
        background: transparent;
      }
    }
    & .tree-footer{
      width: 100%;
      height:60px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      &>button{
        margin-right: 10px;
        line-height: 1.499;
        position: relative;
        display: inline-block;
        font-weight: 400;
        white-space: nowrap;
        text-align: center;
        background-image: none;
        box-shadow: 0 2px 0 rgba(0,0,0,.015);
        cursor: pointer;
        transition: all .3s cubic-bezier(.645,.045,.355,1);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        touch-action: manipulation;
        height: 32px;
        padding: 0 15px;
        font-size: 14px;
        border-radius: 4px;
        color: #f2f2f2;
        background-color: #307FFF;
        border: 1px solid #2B6EDB;
        &:active, &:focus {
            outline: 0;
        }
        &:hover, &:focus {
          opacity: 0.6;
          
        }
        &:nth-last-of-type(1){
          margin-right: 0;
          background: #172A67;
          border: 1px solid #47506E;
          border-radius: 4px;
          color: #999999;
        }
      }
      &::after{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 2px;
        opacity: 0.35;
        background: #47506E;
      }
    }
  }
  
  /* 给过渡的tree加样式 */
  .tree-leave-active,
  .tree-enter-active {
    transition: all 0.2s;
  }
  .tree-leave-active,
  .tree-enter {
    height: 0px !important;
    opacity: 0;
  }
  .tree-leave,
  .tree-enter-active {
    // width: 1380px;
    // height: 700px;
    
    // opacity: 0;
  }
}
</style>
